<script setup>

  defineProps({
    title: {
      type: String,
      default: '标题'
    },
    more: {
      type: String,
      default: ''
    }
  })

</script>

<template>
  <div class="detailSection">
    <div class="header">
      <span class="title">{{ title }}</span>
    </div>
    <div class="content">
      <slot>
        <h3>我是默认内容</h3>
      </slot>
    </div>
    <div class="footer" v-if="more.length">
      <div class="item">
        <span class="more">{{ more }}</span>
        <van-icon name="arrow"/>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .detailSection {
    border-top: 4px solid var(--auxiliary-back-color-two);
    padding: 0 14px 40px;

    .header {
      position: relative;
      padding: 16px 0;
      margin-bottom: 10px;

      .title {
        font-size: 20px;
        //font-weight: bold;
      }

      &:after {
        position: absolute;
        content: '';
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: var(--auxiliary-back-color-two);
      }
    }

    .footer {
      font-size: 16px;
      position: relative;
      padding: 10px 0;
      margin-top: 10px;

      .item {
        position: absolute;
        right: 0;
        color: var(--primary-color);
      }
    }
  }
</style>